<template>
  <div>
    <el-col>
      <el-tag>试卷总数:{{ test.total }}</el-tag>
    </el-col>
    <el-table
        :data="test.records"
        class="table"
    >
      <el-table-column
          prop="name"
          label="试卷标题"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="introduce"
          label="试卷介绍"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="type"
          label="试卷类别"
          width="150"
      >
        <template slot-scope="scope">
          <el-tag>{{getTag(scope.row.type)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleReject(scope.row)" type="danger">驳回试卷</el-button>
          <el-button @click="handleDelete(scope.row)" type="danger">删除试卷</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        :current-page="test.current"
        :page-size="test.size"
        @current-change="change"
        layout="prev, pager, next"
        :total="test.total"
    >
    </el-pagination>

    <el-dialog
        title="驳回试卷"
        :visible.sync="rejectVisible"
        width="30%"
    >
      <span>驳回试卷信息</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="rejectVisible = false">取 消</el-button>
         <el-button @click="Reject">确定驳回</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="删除试卷"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <span>删除试卷信息</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button @click="Delete">确定删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {selectAllTest,rejectTest,deleteTest} from "@/api/test";

export default {
  name: "index",
  data() {
    return {
      test:[], id: '',
      dialogVisible: false,
      rejectVisible: false,
      content: '',
      options: [
        {
          value: '0',
          label: 'Python'
        },
        {
          value: '1',
          label: 'Java'
        },
        {
          value: '2',

          label: '计算机面试'
        },
        {
          value: '3',
          label: '人工智能'
        },
        {
          value: '4',
          label: '考研'
        },
        {
          value: '5',
          label: '移动开发'
        },
        {
          value: '6',
          label: '前端开发'
        },
        {
          value: '7',
          label: '物联网'
        },
        {
          value: '8',
          label: '游戏开发'
        },
        {
          value: '9',
          label: '音视频开发'
        },
        {
          value: "10",
          label: '运维'
        },
        {
          value: "11",
          label: '区块链'
        },
        {
          value: "12",
          label: '架构'
        }
        ]
    }
  },
  mounted() {
    this.change(1)
  },
  methods: {
    getTag(index) {
      return this.options[index].label;
    },
    // 驳回课程信息
    Reject() {
      rejectTest(this.id).then(result => {
        this.change(1)
        this.$message({
          type: 'success',
          duration: 2 * 1000,
          message: result.data.test
        })
      }).catch(error => {
        this.$message({
          type: 'error',
          duration: 2 * 1000,
          message: error.message
        })
      })
      this.rejectVisible=false
    },

    // 点击驳回按钮
    handleReject(row) {
      this.id = row.id
      this.rejectVisible = true
    },
    // 点击删除按钮
    handleDelete(row) {
      this.id = row.id
      this.dialogVisible = true
    },

    // 删除课程
    Delete() {
      deleteTest(this.id).then(result => {
        this.$message({
          type: 'success',
          duration: 2 * 1000,
          message: result.data.test
        })
        this.change(1)
      })
      this.dialogVisible=false
    },
    change(number) {
      selectAllTest(number).then(result => {
        this.test = result.data.test
      }).catch(error => {
        console.log(error)
        this.$message({
          type: "success",
          duration: 2 * 1000,
          message: error.message
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
